<template>
    <div class="application mt-list">

        <div class="mt-list-filter">
            <el-form ref="form" :model="filter" label-width="80px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="应用名称">
                            <mt-input v-model="filter.applicationName" :width="inputWidth"></mt-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <div class="mt-list-filter-btn">
                            <mt-button @click="readList">搜索</mt-button>
                            <mt-button type="submain" @click="resetSearch">重置</mt-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            :data="list"
            height="auto"
            class="mt-list-table table">
            <el-table-column prop="applicationName" label="应用名称" min-width="180"></el-table-column>
            <el-table-column prop="status" label="应用状态" min-width="180">
                <template v-slot="scope">
                    {{ DICT.getDictLabel("3c22ef76-35d4-4500-b9ba-a93ed58120d7", scope.row.status) }}
                </template>
            </el-table-column>
            <el-table-column prop="description" label="应用描述" min-width="180"></el-table-column>
            <!-- <el-table-column prop="updatedAt" label="最后更新" min-width="220"></el-table-column>
            <el-table-column prop="createdAt" label="创建时间" min-width="220"></el-table-column> -->
            <el-table-column fixed="right" label="操作" width="180">
                <template v-slot="scope">
                    <mt-button type="table" @click="goEdit(scope.row)">编辑</mt-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="mt-list-footer">
            <div class="totaldata">共{{ total }}条</div>
            <div class="page">
                <el-pagination
                    style="float: right"
                    :current-page="page"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    :total="total"
                    background
                    :layout="pageLayout"
                    class="mt-page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹窗 -->
        <el-dialog
            title="编辑应用信息"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            width="30%">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="80px">
                <el-form-item label="应用id">
                    <mt-input v-model="form.id" disabled :width="inputWidth"></mt-input>
                </el-form-item>
                <el-form-item label="应用名称" prop="applicationName">
                    <mt-input v-model="form.applicationName" :width="inputWidth"></mt-input>
                </el-form-item>
                <el-form-item label="应用状态">
                    <el-switch
                        v-model="form.status"
                        active-text="启用"
                        inactive-text="停用"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="应用描述">
                    <mt-input v-model="form.description" :width="inputWidth"></mt-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <mt-button @click="handleSubmitBtn">确定</mt-button>
                <mt-button type="submain" @click="handleClose">取消</mt-button>
            </span>
        </el-dialog>

  </div>
</template>

<script>
import { listMixin } from "@/mixins/list-mixins";
import { resetObject } from "@/utils/index.js";
export default {
    name: "Application",

    data () {
        return {
            filter: {
                applicationName: ""
            },
            form: {
                id: "",
                applicationName: "",
                status: 0,
                description: ""
            },
            rules: {
                applicationName: [
                    { required: true, message: "请输入应用名称", trigger: "blur" },
                    { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
                ]
            },

            dialogVisible: false,
            inputWidth: "calc(100% - 1rem)"
        };
    },

    computed: {},

    mixins: [ listMixin ],

    created () {
        this.readList();
    },

    mounted () {},

    methods: {
        /* 获取列表 */
        async readList () {
            const params = this._.clone(this.filter);
            params.page = this.page;
            params.pageSize = this.pageSize;
            this.$request.post(this.API.GET_APPLICATION_LIST, params).then(res => {
                // console.log("applicationList:", res);
                this.list = res.data.data;
                this.total = res.data.total;
            });
        },

        /* 编辑按钮 */
        goEdit (item) {
            this.form = this._.clone(item);
            this.dialogVisible = true;
        },
        /* 编辑提交 */
        handleSubmitBtn () {
            const params = this._.clone(this.form);
            this.$request.post(this.API.UPDATE_APPLICATION, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("修改成功！");
                    this.handleClose();
                    this.readList();
                }
            });
        },
        /* 弹窗关闭 */
        handleClose () {
            this.dialogVisible = false;
            resetObject(this.form);
        }
    }
}
</script>

<style lang="scss">
@import "~@/styles/mt-list.scss";
</style>